<template>
    <!-- 每一条评论 -->
    <div class="cmt-item">
        <div class="cmt_head">
            <router-link to="/">
                <img :src="item.user.avatarUrl" alt="">
            </router-link>
        </div>
        <div class="cmt_wrap">
            <div class="cmt_header">
                <div class="cmt_meta">
                    <a href="#" class="user">{{item.user.nickname}}</a>
                    <div class="cmt_time">{{item.time|filterTime}}</div>
                </div>
                <div class="cmt_like">
                    <span></span>
                </div>
            </div>
            <div class="cmt_content">
                {{item.content}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Cmt',
    props: {
        item: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    filters: {
        filterTime(t) {
            let date = new Date(t);
            let y = date.getFullYear();
            let m = date.getMonth() + 1;
            let r = date.getDate();
            return y + '年' + m + '月' + r + '日';
        }
    }
}
</script>

<style lang="less" scoped>
.cmt-item {
    display: flex;
    width: 100%;
    padding-top: 10px;
    .cmt_head {
        display: flex;
        align-items: center;
        height: 35px;
        margin: 0 10px;
        a {
            display: block;
            width: 30px;
            height: 30px;
            background-color: skyblue;
            border-radius: 50%;
            overflow: hidden;
            img {
                width: 100%;
                display: block;
            }
        }
    }
    .cmt_wrap {
        flex: 1;
        padding-right: 10px;
        padding-bottom: 11px;
        .cmt_header {
            display: flex;
            flex: 1;
            .cmt_meta {
                .user {
                    display: block;
                    font-size: 14px;
                    color: #666;
                    line-height: 20px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    text-decoration: none;
                    text-align: left;
                }
                .cmt_time {
                    font-size: 9px;
                    color: #999;
                    text-align: left;
                }
            }
        }
        .cmt_content {
            color: #333;
            font-size: 15px;
            line-height: 22px;
            margin-top: 5px;
            text-align: left;
        }
    }
}
</style>
